<template>
  <div class="lin_works">
    <div class="lin_works_list">
      <ul>
        <li>
          <div>
            <span>Company:<a>Sunshine and Rain Dew</a></span>
            <span>Data:<a>2019-2020</a></span>
            <span>Position:<a>Operations Engineer</a></span>
          </div>
          <div style="height: 100%; width: 60%;">
            <p style="padding-bottom: 20px;">job description:</p>
            <div class="demo-collapse">
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item title="Consistency" name="1">
                  <div>
                    Consistent with real life: in line with the process and logic of real
                    life, and comply with languages and habits that the users are used to;
                  </div>
                  <div>
                    Consistent within interface: all elements should be consistent, such
                    as: design style, icons and texts, position of elements, etc.
                  </div>
                </el-collapse-item>
                <el-collapse-item title="Feedback" name="2">
                  <div>
                    Operation feedback: enable the users to clearly perceive their
                    operations by style updates and interactive effects;
                  </div>
                  <div>
                    Visual feedback: reflect current state by updating or rearranging
                    elements of the page.
                  </div>
                </el-collapse-item>
                <el-collapse-item title="Efficiency" name="3">
                  <div>
                    Simplify the process: keep operating process simple and intuitive;
                  </div>
                  <div>
                    Definite and clear: enunciate your intentions clearly so that the
                    users can quickly understand and make decisions;
                  </div>
                  <div>
                    Easy to identify: the interface should be straightforward, which helps
                    the users to identify and frees them from memorizing and recalling.
                  </div>
                </el-collapse-item>
                <el-collapse-item title="Controllability" name="4">
                  <div>
                    Decision making: giving advices about operations is acceptable, but do
                    not make decisions for the users;
                  </div>
                  <div>
                    Controlled consequences: users should be granted the freedom to
                    operate, including canceling, aborting or terminating current
                    operation.
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </li>
        <li>
          <div>
            <span>Company:<a>Hangsheng Technology Co.,Ltd</a></span>
            <span>Data:<a>2020-2022</a></span>
            <span>Position:<a>Operations Engineer</a></span>
          </div>
          <div style="height: 100%; width: 60%;">
            <p style="padding-bottom: 20px;">job description:</p>
            <div class="demo-collapse">
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item title="Consistency" name="1">
                  <div>
                    Consistent with real life: in line with the process and logic of real
                    life, and comply with languages and habits that the users are used to;
                  </div>
                  <div>
                    Consistent within interface: all elements should be consistent, such
                    as: design style, icons and texts, position of elements, etc.
                  </div>
                </el-collapse-item>
                <el-collapse-item title="Feedback" name="2">
                  <div>
                    Operation feedback: enable the users to clearly perceive their
                    operations by style updates and interactive effects;
                  </div>
                  <div>
                    Visual feedback: reflect current state by updating or rearranging
                    elements of the page.
                  </div>
                </el-collapse-item>
                <el-collapse-item title="Efficiency" name="3">
                  <div>
                    Simplify the process: keep operating process simple and intuitive;
                  </div>
                  <div>
                    Definite and clear: enunciate your intentions clearly so that the
                    users can quickly understand and make decisions;
                  </div>
                  <div>
                    Easy to identify: the interface should be straightforward, which helps
                    the users to identify and frees them from memorizing and recalling.
                  </div>
                </el-collapse-item>
                <el-collapse-item title="Controllability" name="4">
                  <div>
                    Decision making: giving advices about operations is acceptable, but do
                    not make decisions for the users;
                  </div>
                  <div>
                    Controlled consequences: users should be granted the freedom to
                    operate, including canceling, aborting or terminating current
                    operation.
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </li>
        <li>
          <div>
            <span>Company:<a>Ruimo Intelligent Technology Co.,Ltd</a></span>
            <span>Data:<a>2023-Nowadays</a></span>
            <span>Position:<a>Devops Devlpment</a></span>
          </div>
          <div style="height: 100%; width: 60%;">
            <p style="padding-bottom: 20px;">job description:</p>
            <div class="demo-collapse">
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item title="Consistency" name="1">
                  <div>
                    Consistent with real life: in line with the process and logic of real
                    life, and comply with languages and habits that the users are used to;
                  </div>
                  <div>
                    Consistent within interface: all elements should be consistent, such
                    as: design style, icons and texts, position of elements, etc.
                  </div>
                </el-collapse-item>
                <el-collapse-item title="Feedback" name="2">
                  <div>
                    Operation feedback: enable the users to clearly perceive their
                    operations by style updates and interactive effects;
                  </div>
                  <div>
                    Visual feedback: reflect current state by updating or rearranging
                    elements of the page.
                  </div>
                </el-collapse-item>
                <el-collapse-item title="Efficiency" name="3">
                  <div>
                    Simplify the process: keep operating process simple and intuitive;
                  </div>
                  <div>
                    Definite and clear: enunciate your intentions clearly so that the
                    users can quickly understand and make decisions;
                  </div>
                  <div>
                    Easy to identify: the interface should be straightforward, which helps
                    the users to identify and frees them from memorizing and recalling.
                  </div>
                </el-collapse-item>
                <el-collapse-item title="Controllability" name="4">
                  <div>
                    Decision making: giving advices about operations is acceptable, but do
                    not make decisions for the users;
                  </div>
                  <div>
                    Controlled consequences: users should be granted the freedom to
                    operate, including canceling, aborting or terminating current
                    operation.
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </li>
        <li>
          <span>....</span>
        </li>
      </ul>
    </div>
  </div>

</template>

<script lang="ts">
import { Timer } from '@element-plus/icons-vue';
import { defineComponent, ref, onMounted, reactive, toRefs } from "vue";
export default defineComponent({
  components: {
    Timer
  },
  async setup(){
    const data = reactive({

    })


    


    return{
      ...toRefs(data)
    }
  }

})

</script>




<style scoped>
.lin_works {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.lin_works_list {
  position: absolute;
  left: 10%;
  margin-top: 1%;
}

.lin_works_list ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 60px;
  
}

.lin_works_list ul li {
  height: 430px;
  width: 800px;
  display: flex;
  border-radius: 2%;
  border: 1px solid #ffffff;
  box-shadow: 1px 1px 4px rgb(173, 173, 173);
  transition: all 0.2s ease-in-out;
}

.lin_works_list ul li:hover {
  cursor: pointer;
  box-shadow: 3px 3px 5px rgb(128, 127, 127);
}

.lin_works_list ul li:hover:active{
  box-shadow: none;
  transform: translateY(-5px);
  transition: all 0.2s
}

.lin_works_list ul li div {
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  transition: all 0.5s ease;
}


.lin_works_list ul li {
  display: flex;
  justify-content: center; 
  align-items: center;
}

.lin_works_list span {
  font-size: 15px;
  font-weight: bolder;
  margin-left: 10px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.lin_works_list span a {
  padding: 0 10px;
}

.lin_works_list p {
  font-size: 15px;
  font-weight: bold;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

</style>